<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item label="订单ID:">
          <el-input
            v-model="q.id"
            placeholder="订单ID"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            prefix-icon="el-icon-edit"
          ></el-input>
        </el-form-item>
        <el-form-item label="代理账号:">
                    <el-select v-model="q.agency_id" clearable filterable placeholder="请输入代理账号">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="q.status" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option
              v-for="(statu, index) of ReChargeStatus"
              :key="index"
              :label="statu"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="text" disabled>{{this.Timetype?'申请时间':'最后更新时间'}}</el-button>(
          <el-button type="text" @click="toggleTimetype">点击切换</el-button>)
          <el-date-picker
            v-if="Timetype"
            v-model="q.created_at_begin"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
          <el-date-picker
            v-else
            v-model="q.updated_at_begin"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>-
          <el-date-picker
            v-if="Timetype"
            v-model="q.created_at_end"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
          <el-date-picker
            v-else
            v-model="q.updated_at_end"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="listData.items"
      v-loading.body="listLoading"
      @sort-change="sortlist"
      size="mini"
      stripe
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="id" label="订单ID" width="80" fixed="left"></el-table-column>
      <el-table-column prop="agency_nickname" label="代理账号" width="150">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <el-table-column prop="amount" label="申请金额" width="100"></el-table-column>
      <el-table-column prop="before_amount" label="申请前余额" min-width="120"></el-table-column>
      <el-table-column prop="created_at" label="申请时间" sortable width="180"></el-table-column>
      <el-table-column prop="status" label="当前状态" width="100">
        <template slot-scope="scope">{{ReChargeStatus[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="updated_at" label="最后更新时间" sortable width="180"></el-table-column>
      <el-table-column prop="success_at" label="到账时间" sortable width="180"></el-table-column>
      <el-table-column prop="chase_amount" label="追分金额" min-width="100"></el-table-column>
      <el-table-column prop="reason" label="备注" min-width="240"></el-table-column>

      <el-table-column label="操作" width="155" fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.status==1">
            <el-button type="success" size="mini" @click="agree(scope.row)">同意</el-button>
            <el-button type="danger" size="mini" @click="refuse(scope.row)">拒绝</el-button>
          </div>
          <div v-if="scope.row.status==3">
            <el-button type="warning" size="mini" @click="handleChaseDialog(scope.row)">追分</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr"
        :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listData.total"
      ></el-pagination>
    </div>
    <!--        <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :MerchantType="MerchantType"-->
    <!--                       ></save-update>-->
    <chase-dialog @success="handleChaseSuccess" ref="chaseDialog"></chase-dialog>
  </div>
</template>

<script>
import {
  getAgencyChildRechargeList,
  refuseAgencyRecharge,
  agreeAgencyRecharge,getAgencyList
} from "@/api";
import { queryFilter } from "@/utils/patch";
import { useVcode } from "../../utils/CommonJs";
import chaseDialog from "./chaseDialog";

export default {
  components: {
    chaseDialog
  },
  data() {
    return {
      listData: {},
      q: { page_size: 30, page_no: 1 },
      listLoading: false,
      Timetype: true,
      showUpdate: false,
                AgencyList: [],
      ReChargeStatus: this.$store.state.app.ReChargeStatus,
      show_id: null
    };
  },
  created() {
    this.getList();
              this.getAgencyList()
  },
  deactivated() {
    this.listLoading = false;
  },
  methods: {
    getMenberInfo() {
      this.$store.dispatch("GetInfo");
    },
    add() {
      this.show_id = null;
      this.showUpdate = true;
    },
    getAgencyList() {
        getAgencyList({page_size: 1000, page_no: 1, agency_type: 1}).then(res => {
            if (res.status === 0) {
                this.AgencyList = res.data.items
            }
        })
    },
    update(row) {
      this.show_id = row.id;
      this.showUpdate = true;
    },
    query() {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 30 });
      this.getList();
    },
    reload() {
      this.q = { page_size: 30, page_no: 1 };
      this.getList();
    },
    refuse(row) {
      // this.$confirm('拒绝【' + row.agency.user_name + '】的【' + row.amount + '】元充值申请', '拒绝申请额度', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      // }).then(() => {
      useVcode(this, () => {
        setTimeout(() => {
          this.$prompt(
            `请输入拒绝理由`,
            `拒绝【${row.agency.user_name}】的【${row.amount}】元充值申请`,
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              inputType:'textarea',
            }
          ).then(({ value }) => {
            let reason = {reason: value}
            queryFilter(reason)
            refuseAgencyRecharge(row.id,reason).then(res => {
              if (res.status === 0) {
                this.$message({ type: "success", message: "审核成功!" });
                this.getList();
              }
            });
          });
        }, 500);
      });

      // })
    },
    agree(row) {
      this.$prompt(
        `通过【<span color-red class="color-red">${row.agency.user_name}</span>】的【<span color-red class="color-red">${row.amount}</span>】元充值申请?`,
        "同意申请额度",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "请输入备注信息",
            dangerouslyUseHTMLString: true,
          inputType:'textarea',
        }
      ).then(({value}) => {
          useVcode(this, () => {
            let reason = {reason: value}
            queryFilter(reason)
            agreeAgencyRecharge(row.id,reason).then(res => {
              if (res.status === 0) {
                this.$message({ type: "success", message: "审核成功!" });
                this.getMenberInfo();
                this.getList();
              }
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消同意"
          });
        });
    },
    toggleTimetype() {
      if (this.Timetype) {
        delete this.q.created_at_begin;
        delete this.q.created_at_end;
        this.Timetype = !this.Timetype;
      } else {
        delete this.q.updated_at_begin;
        delete this.q.updated_at_end;
        this.Timetype = !this.Timetype;
      }
    },
    sortlist(sort) {
      this.q.$orderby = sort.prop;
      this.getList();
    },
    handleSizeChange(val) {
      this.q.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.q.page_no = val;
      this.getList();
    },
    handleChaseSuccess() {
      this.getMenberInfo();
      this.getList();
    },
    getList() {
      this.q = queryFilter(this.q);
      getAgencyChildRechargeList(this.q).then(res => {
        if (res.status === 0) {
          this.listLoading = false;
          this.listData = res.data;
          this.listData.items = Array.from(res.data.items, x =>
            Object.assign({}, x, {
              amount: Number(x.amount) / 100,
              before_amount: Number(x.before_amount) / 100,
              chase_amount: Number(x.chase_amount) / 100
            })
          );
        }
      });
    },
    handleChaseDialog(row) {
      this.$refs["chaseDialog"].open(row);
    }
  },
  watch: {
    showUpdate() {
      if (!this.showUpdate) {
        this.getList();
      }
    }
  }
};
</script>
